<template>
    <div class="homeContent main baseBg flex w100">
        <div class="l flex column">
            <div class="left_content partBg radius4 p10 ptop flex column flex1 w100">
                <div class="marketbox">
                    <market v-if="quotationList.length>0" :quotationList="quotationList"></market>
                </div>
                <div class="klinebox flex1">
                    <kline></kline>
                </div>
            </div>
            <div class="entrust-box mt4">
                <entrust></entrust>
            </div>
        </div>
        <div class="r flex column">
            <div class="exchangebox flex1 overhide">
                <exchange></exchange>
            </div>
            <div class="tradebox">
                <trade></trade>
            </div>
        </div>

        <!-- <div class="flex">
            <div class="leftbox">
                <div class="marketbox partBg radius4">
                    <market></market>
                </div>
                <div class="noticebox mt10">
                    <notice></notice>
                </div>
            </div>
            <div class="rightbox flex1 ml10">
                <div class="flex">
                    <div class="w75">
                        <div class="klinebox radius4">
                            <kline></kline>
                        </div>
                        <div class="mt10 radius4">
                            <trade></trade>
                        </div>
                    </div>
                    <div class="rtcenter_box flex1 ml10">
                        <div class="tradecontent radius4">
                            <exchange></exchange>
                        </div>
                    </div>
                </div>
                <div class="entrustbox mt10">
                    <entrust></entrust>
                </div>
                
            </div>
        </div> -->
    </div>
</template>
<script>
import market from '@/components/market'
import notice from '@/components/notice'
import kline from '@/components/kline'
import trade from '@/components/trade'
import exchange from '@/components/exchange'
import entrust from '@/components/entrust'
export default {
    name:'homeContent',
    components:{market,notice,kline,trade,exchange,entrust},
    data(){
        return{
            quotationList:[]
        }
    },
    created(){
        this.getData();
    },
    methods:{
        // 获取数据
        getData(){
            var that = this;
            this.axios.get('/api/currency/quotation_new',{
            }).then(res=>{
                var msg = res.data.message;
                that.quotationList = msg;
                var arr = [];
                for(var i=0;i<msg.length;i++){
                    arr[i] = msg[i].quotation
                };
                var arrFrist=arr[0][0];
                // 默认第一对交易对
                var tradeData = {
                    legal_id:arrFrist.legal_id,
                    currency_id: arrFrist.currency_id,
                    legal_name: arrFrist.legal_name,
                    currency_name: arrFrist.currency_name,
                    symbol:arrFrist.currency_name+'/'+arrFrist.legal_name 
                };
                if (!window.localStorage.getItem("tradeData")) {
                    that.$store.dispatch("tradeChange",tradeData);//设置默认vuex的tradeData
                    window.localStorage.setItem("tradeData", JSON.stringify(tradeData));//储存默认localStorage的tradeData
                }else{
                    var localData=JSON.parse(window.localStorage.getItem("tradeData"));
                    this.$store.dispatch("tradeChange",localData);//如本地有数据vuex的tradeData从本地取值
                }
            })
            .catch(function(err){
                if(err.response) {
                    console.log(err.response)
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.main{
    height: calc(100vh - 48px);
    min-height: 730px;
    .l{
        flex: 1 0 auto;
        margin: 4px;
        .entrust-box{
            height: 202px;
        }
    }
    .r{
        width: 636px;
        margin-top: 4px;
        margin-bottom: 4px;
    }
}
@media screen and (max-width: 1440px){
    .main .r {
        width: 564px;
    }
}

</style>


